import {TreeCheckBox} from "./TreeCheckBox";

export class TreeViewElement extends React.Component{
    constructor(){
        super();
    }
    state={
        isExpend:false,
        childrenNode:[]
    }

    /**
     * 当图表点击的时候状态为反向状态
     * @param e
     */
    icoClick=(e)=>{
        //this.props.isExpend=false;
        if(this.state.childrenNode.length>0){
            // this.ele.className="row";
            // this.state.isExpend=!this.state.isExpend;
            // this.setState({isExpend: this.state.isExpend});
            if(this.props.icoClick){
                this.props.icoClick(this.state.isExpend,this.props.dataSource);
            }
        }
    }
    
    flush=()=>{
      console.log("刷新",this.state.childrenNode);
      if(this.props.parent){
        this.props.parent.flush();
      }
      this.setState(this.state);
    }

    add=(ele)=>{
        // this.state.childrenNode.push(ele);
        // if(this.state.childrenNode.length>0){
        //     this.props.space=this.props.space-1;
        // }
        //
        // this.setState(this.state);
    }

    expend=(isExpend)=>{
        this.state.isExpend=isExpend;
        this.ele.className="row";
        this.setState({isExpend: isExpend});
    }


    mouseDown=(e)=>{
        if(this.props.itemClick){
            this.props.itemClick(e,this.props.dataSource);
        }
    }

    ids=(id)=>{

        this.props.dataSource._data.ids[id]=0;
        if(this.props.parent){
            this.props.parent.ids(id);
        }

    }

    checkBoxClick=(checked)=>{
        this.setVal(checked);

    }

    setCurrVal=(v)=>{
        this.checkbox.setVal(v);
        this.props.dataSource._data.selected=v;
    }

    setParentVal=()=>{
        let ds=this.props.dataSource;

            let selected=0;
            let parentd=this.props.parentData["_"+ds.parent];

            let i=0,a=0,c=0;
            for(let key in parentd){
                i++;
                if(parentd[key]._data.selected&&parentd[key]._data.selected===1){
                    a++;
                }
                if(parentd[key]._data.selected&&parentd[key]._data.selected!=0){
                    c++;
                }
            }
            if(c>0){
                selected=2;
            }
            if(i===a){
                selected=1;
            }

            if(this.props.parent){
                this.props.parent.setCurrVal(selected);
                this.props.parent.setParentVal();
            }

    }

    setVal=(v)=>{
        this.setCurrVal(v);
        //if()
        //向上设置checkbox;

        this.setParentVal();
        let ds=this.props.dataSource;
        //向下设置checkbox
        if(ds){
            for(let key in ds._data.ids){
                if(this.props.alldata["_"+key]){
                    this.props.alldata["_"+key][this.props.action].setCurrVal(v);
                }
            }
        }


    }

    itemMouseOver=(e)=>{

        if(this.props.joinAction){
            let arr=this.props.joinAction.split(",");
            for(let ac in arr){
              this.props.dataSource[arr[ac]].hover(true);
            }
        }else{
            this.props.dataSource[this.props.action].hover(true);
        }

    }

    itemMouseOut=(e)=>{
      if(this.props.joinAction){
          let arr=this.props.joinAction.split(",");
          for(let ac in arr){
            this.props.dataSource[arr[ac]].hover(false);
          }
      }else{
          this.props.dataSource[this.props.action].hover(false);
      }
    }

    element=(space,ico)=>{
      return <React.Fragment>
             {space}
             {this.state.childrenNode.length>0?ico:""}
             {this.props.isCheckBox?<TreeCheckBox ref={(r)=>this.checkbox=r} onClick={this.checkBoxClick}/>:""}
             {this.props.children}
           </React.Fragment>
    }

    elementRender=(space,ico)=>{
        return <React.Fragment>
               {this.element(space,ico)}
             </React.Fragment>
    }

    hover=(bl)=>{
       if(bl){
         this.ele.className="row hover noselect"
       }else{
         this.ele.className="row noselect"
       }
    }

    render(){

        let stylename=this.state.isExpend?"down":"right";

        let space=<span style={{marginLeft: this.props.space+"rem"}}></span>;

        let ico=(<span><i onClick={this.icoClick} onMouseOver={(e)=>{
            e.stopPropagation();
            e.nativeEvent.stopImmediatePropagation();
        }} class={"fas fa-chevron-"+stylename} style={{fontSize:'12px', marginRight:".5rem",display:"inline-block",width:".5rem"}}/></span>);

        if(this.props.childrenNode){
            this.state.childrenNode=this.props.childrenNode;
            if(this.props.childrenNode.length===0)
            {
              space=<span style={{marginLeft: (this.props.space+1)+"rem"}}></span>;
            }
        }else{
            space=<span style={{marginLeft: (this.props.space+1)+"rem"}}></span>;
        }


        if(this.props.dataSource){
            console.log("动作名称",this.props.action);
            this.props.dataSource[this.props.action]=this;
            //this.props.dataSource._data.selected=0;
            if(this.props.parent){
                this.ids(this.props.dataSource.id);
            }
        }

        return (
            <React.Fragment>
                <div className={"row noselect"} onDoubleClick={this.icoClick} ref={(r)=>this.ele=r} onMouseOver={(e)=>{

                      this.itemMouseOver();

                }} onMouseOut={(e)=>{

                     this.itemMouseOut();

                }} onMouseDown={this.mouseDown}>

                   {this.elementRender(space,ico)}

                </div>
                {
                    this.state.childrenNode.length>0?<dl style={{display:this.state.isExpend?"block":"none"}}>
                        {this.state.childrenNode.map(item=>{
                            item.props.parent=this;
                            return <dt>{item}</dt>
                        })}
                    </dl>:""
                }
            </React.Fragment>
        )
    }
}
